import React, { Component } from 'react'
import SearchCss from './Search.module.css'
import axios from 'axios'
import { Link } from 'react-router-dom';
import img100 from './images/16.jpg'
export default class Search extends Component {
    constructor() {
        super()
        this.state = {
            inputvalue: '',
            searchList: []
        }
    }
    getChange(e) {
        this.setState({
            inputvalue: e.target.value,
        })

    }
    onkeydown = (e) => {
        if (e.keyCode === 13) {
            this.setState({
                inputvalue: ''
            })
            this.getSearch()
        }
    }
    getSearch = () => {
        let params = { pname: this.state.inputvalue, page: 1, pageSize: 100 }
        axios.get("/search/api/search/product/search", { params }).then(res => {
            this.setState({
                searchList: res.data,
            })
        })
    }
    toDetail(pid) {
        this.props.history.push('/detail', { pid })
    }
    render() {
        return (
            <div>
                <header className={SearchCss.header}>
                    <input className={SearchCss.input} text='text' onKeyDown={(e) => this.onkeydown(e)} onChange={this.getChange.bind(this)} value={this.state.inputvalue} placeholder='DUNK 熊猫' /><Link to='/'><span className={SearchCss.span}>取消</span></Link>
                </header>
                <section className={SearchCss.section}>
                    {this.state.searchList.map((el, i) =>
                        <div onClick={() => this.toDetail(el.pid)} key={i} className={SearchCss.box}>
                            <div className={SearchCss.photo}>
                                <img className={SearchCss.img} src={el.photos[0].path} />
                            </div>
                            <dl>
                                <dt style={{ fontSize: '0.12rem', fontWeight: '900' }}>{el.pname}</dt>
                                <dd style={{ fontSize: '0.14rem', fontWeight: '900' }}>￥{el.price}<span style={{ fontSize: '0.12rem', fontWeight: '200', float: 'right' }}>{el.count}人付款</span></dd>
                            </dl>
                        </div>
                    )}
                </section>
            </div>
        )
    }
}
